<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="test"></canvas>
		<script>
			var canvas = document.getElementById('test');
			var ctx = canvas.getContext('2d');
			function Arrow(x1, y1, x2, y2) {
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.tmpX1 = null;
    this.tmpY1 = null;
    this.tmpX2 = null;
    this.tmpY2 = null;
    this.color = "black";

}
			var draw = function(x, y, width, height, radius, color, type) {
				ctx.beginPath();
				ctx.moveTo(x, y + radius);
				ctx.lineTo(x, y + height - radius);
				ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
				ctx.lineTo(x + width - radius, y + height);
				ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
				ctx.lineTo(x + width, y + radius);
				ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
				ctx.lineTo(x + radius, y);
				ctx.quadraticCurveTo(x, y, x, y + radius);
				ctx[type + 'Style'] = color || params.color;
				ctx.closePath();
				ctx[type]();
			};
			
Arrow.prototype.drawArrowhead = function(ctx, x, y, radians) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(x, y);
    ctx.rotate(radians);
    ctx.moveTo(0, 0);
    ctx.lineTo(5, 10);
    ctx.lineTo(-5, 10);
    ctx.closePath();
    ctx.restore();
    ctx.fill();
}
			draw(50, 100, 100, 50, 30, 'green', 'stroke');
			drawArrowhead(ctx,20,20,5);
		</script>
	</body>

</html>